<template>
  <div class="index" id="capture" ref="capture">
    <div class="top-bar" :style="'background:' + color">
      <div class="yuan flex align">
        <div class="yuan1" @click="toColor('#EA276C')"></div>
        <div class="yuan2" @click="toColor('#26272C')"></div>
      </div>
    </div>
    <img src="@/assets/banner.png" class="banner" />
    <!-- <img :src="banner" class="banner" /> -->
    <div class="main" :style="'background:' + color">
      <div class="tabs flex align">
        <div :class="actIndex == 0 ? 'act' : ''" @click="toAct(0)">推荐中</div>
        <div
          :class="actIndex == index + 1 ? 'act' : ''"
          @click="toAct(index + 1, item.path)"
          v-for="(item, index) in listL"
          :key="index"
        >
          {{ item.title }}
        </div>
        <!-- <div :class="actIndex == 2 ? 'act' : ''" @click="toAct(2)">推荐二</div>
        <div :class="actIndex == 3 ? 'act' : ''" @click="toAct(3)">推荐三</div>
        <div :class="actIndex == 4 ? 'act' : ''" @click="toAct(4)">推荐四</div> -->
      </div>
      <div class="items" v-if="actIndex == 0">
        <div
          class="item-i flex align"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="item-name">{{ item.name }}</div>
          <div class="flex align" style="position: relative">
            <input
              placeholder="请输入关键字"
              v-model="item.item_name"
              @input="handleInput1"
              :data-index="index"
              :data-id="item.id"
            />
            <div class="options" v-if="item.focus">
              <div
                class="options-item"
                v-for="(item2, index2) in item.item_option"
                @click="
                  toSelect(item2.id, item2.sales_price, index, item2.name)
                "
                :key="index2"
              >
                {{ item2.name }}
              </div>
              <div class="zan" v-if="item.item_option.length == 0">
                暂无数据
              </div>
            </div>
            <img src="@/assets/icon.png" class="icon" />
            <div class="flex deNumDiv">
              <button :disabled="item.disabled" @click="decrement(index)">
                -
              </button>
              <input
                placeholder="数量"
                disabled
                type="number"
                v-model="item.num"
                class="deNum"
              />
              <button @click="increment(index)">+</button>
            </div>
          </div>
          <div class="price">
            ￥<span>{{ item.price == 0 ? "" : item.price }}</span>
          </div>
        </div>
      </div>
      <div class="items2" v-if="actIndex != 0">
        <img :src="img" class="img" />
      </div>
      <div class="bottom flex between">
        <!-- <div class="bto-left">
          <div class="left-nav flex align">
            <div :class="btoAct == 0 ? 'btoAct' : ''" @click="toBtoAct(0)">
              1K
            </div>
            <div :class="btoAct == 1 ? 'btoAct' : ''" @click="toBtoAct(1)">
              2K
            </div>
            <div :class="btoAct == 2 ? 'btoAct' : ''" @click="toBtoAct(2)">
              4K
            </div>
          </div>
          <div class="bto-item flex between">
            <div
              class="bto-item-i flex align"
              v-for="(item, index) in 3"
              :key="index"
            >
              <img src="@/assets/img2.jpg" />
              <div class="infos">
                <div class="name">黑神话 悟空</div>
                <div class="nums">115</div>
                <div class="tip">平均帧数</div>
              </div>
            </div>
            <div class="bto-item-i flex align bto-item-more">查看更多游戏</div>
          </div>
        </div> -->
        <div class="bto-right">
          <div class="flex align sums">
            <div>￥</div>
            <div>{{ sums }}</div>
            <!-- <input v-model="sums" /> -->
          </div>
          <div class="name">总价</div>
          <div class="btns flex align between">
            <div @click="clear()">清除配置</div>
            <div @click="toShow()">保存配置</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <div class="showTan" v-if="show">
      <div class="tanCon">
        <div class="title">备注信息</div>
        <textarea placeholder="输入备注信息....." v-model="remark"></textarea>
        <div class="flex align between">
          <div class="btns" @click="show = false">取消</div>
          <div class="btns" @click="toSave()">保存配置</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { position, product, order, upload, staff, user } from "@/api/apiData";
import html2canvas from "html2canvas";
import { ElLoading } from "element-plus";
export default {
  data() {
    return {
      color: "#EA276C",
      actIndex: 0,
      input1: false,
      list: [
        {
          id: 1,
          name: "CPU",
          item_name: "",
          item_option: [],
          price: 0,
          focus: false,
          selId: "",
          num: 0,
          disabled: true,
        },
        {
          id: 2,
          name: "主板",
          item_name: "",
          item_option: [],
          price: 0,
          focus: false,
          selId: "",
          num: 0,
          disabled: true,
        },
        {
          id: 3,
          name: "硬盘",
          item_name: "",
          item_option: [],
          price: 0,
          focus: false,
          selId: "",
          num: 0,
          disabled: true,
        },
        {
          id: 4,
          name: "内存",
          item_name: "",
          item_option: [],
          price: 0,
          focus: false,
          selId: "",
          num: 0,
          disabled: true,
        },
        {
          id: 5,
          name: "显卡",
          item_name: "",
          item_option: [],
          price: 0,
          focus: false,
          selId: "",
          num: 0,
          disabled: true,
        },
        {
          id: 6,
          name: "散热",
          item_name: "",
          item_option: [],
          price: 0,
          focus: false,
          selId: "",
          num: 0,
          disabled: true,
        },
        {
          id: 7,
          name: "电源",
          item_name: "",
          item_option: [],
          price: 0,
          focus: false,
          selId: "",
          num: 0,
          disabled: true,
        },
        {
          id: 8,
          name: "机箱",
          item_name: "",
          item_option: [],
          price: 0,
          focus: false,
          selId: "",
          num: 0,
          disabled: true,
        },
      ],
      btoAct: 0,
      sums: "",
      show: false,
      banner: "",
      listL: [],
      img: "",
      remark: "",
      image: "",
    };
  },
  mounted() {
    let token = localStorage.getItem("token");
    staff.detail().then((res) => {
      if (res.code == 1) {
        this.toSums();
        // position.content.detail({ position_id: 1 }).then((res) => {
        //   this.banner = res.data.path;
        // });
        this.getList();
      } else {
        this.$router.push("/login");
      }
    });
  },
  methods: {
    toShow() {
      if (this.sums == 0) {
        this.$message({
          message: "请选择配置",
          type: "error",
        });
      } else {
        this.captureElement();
      }
    },
    captureElement() {
      const element = this.$refs.capture; // 获取需要生成图片的DOM元素
      let that = this;
      html2canvas(element).then((canvas) => {
        // 创建一个图像元素
        let img = new Image();
        img.src = canvas.toDataURL("image/png");
        // 插入到DOM中，例如插入到body中
        console.log(canvas.toDataURL("image/png"));
        let file = canvas.toDataURL("image/png");
        that.show = true;
        upload.file({ file: file }).then((res) => {
          if (res.code == 1) {
            that.image = res.data.path;
          } else {
            that.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
        // document.body.appendChild(img);
        // that.show = true

        // // 如果需要下载图片
        // let a = document.createElement('a');
        // a.href = img.src;
        // a.download = 'capture.png';
        // a.click();
      });
    },
    // 保存配置
    toSave() {
      const loading = ElLoading.service({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let obj = {
        product_list: [
          {
            product_cpu_id: this.list[0].selId,
            quantity: this.list[0].num,
          },
          {
            product_motherboard_id: this.list[1].selId,
            quantity: this.list[1].num,
          },
          {
            product_hdd_id: this.list[2].selId,
            quantity: this.list[2].num,
          },
          {
            product_memory_id: this.list[3].selId,
            quantity: this.list[3].num,
          },
          {
            product_gpu_id: this.list[4].selId,
            quantity: this.list[4].num,
          },
          {
            product_fan_id: this.list[5].selId,
            quantity: this.list[5].num,
          },
          {
            product_power_id: this.list[6].selId,
            quantity: this.list[6].num,
          },
          {
            product_case_id: this.list[7].selId,
            quantity: this.list[7].num,
          },
        ],
        remark: this.remark,
        image: this.image,
      };
      order.submit(obj).then((res) => {
        this.$message({
          message: res.msg,
          type: "none",
        });
        this.show = false;
        loading.close();
      });
    },
    // 推荐商品列表
    getList() {
      position.content.lists({ position_id: 2 }).then((res) => {
        this.listL = res.data;
      });
    },
    // 商品列表
    getList2(v, i, id) {
      product.all({ category_id: id, name: v }).then((res) => {
        // this.listL = res.data;
        this.list[i].item_option = res.data;
      });
    },
    clear() {
      this.list.forEach((item) => {
        item.item_name = "";
        item.price = "";
        item.num = 0;
      });
      this.sums = 0;
    },
    toSums() {
      let list = this.list;
      let sum = 0;
      list.forEach((item) => {
        sum += Number(item.price) * item.num;
      });
      this.sums = sum;
    },
    toColor(c) {
      this.color = c;
    },
    toAct(a, p) {
      this.actIndex = a;
      if (a != 0) {
        this.img = p;
      }
    },
    toBtoAct(a) {
      this.btoAct = a;
    },
    handleInput1(event) {
      let index = event.target.dataset.index;
      let id = event.target.dataset.id;
      let val = event.target.value;
      this.getList2(val, index, id);
      if (event.target.value != "") {
        this.list[index].focus = true;
      } else {
        this.list[index].focus = false;
        this.list[index].price = "";
        this.list[index].num = 0;
      }
    },
    handleBlur(event) {
      let index = event.target.dataset.index;
      this.list[index].focus = false;
    },
    toSelect(id, price, i, name) {
      console.log(name);
      this.list[i].price = price;
      this.list[i].selId = id;
      this.list[i].item_name = name;
      this.list[i].focus = false;
      this.list[i].num = 1;
      this.toSums();
    },
    increment(i) {
      this.list[i].num += 1;
      if (this.list[i].num > 0) {
        this.list[i].disabled = false;
      }
      this.toSums();
    },
    decrement(i) {
      this.list[i].num -= 1;
      if (this.list[i].num == 0) {
        this.list[i].disabled = true;
      }
      this.toSums();
    },
  },
};
</script>
<style lang="less" scoped>
.top-bar {
  width: 100%;
  // height: 46px;
  .yuan {
    padding: 7px 16px;
    div {
      width: 32px;
      height: 32px;
      border: solid 1px white;
      border-radius: 50%;
    }
    .yuan1 {
      background: #ea276c;
      margin-right: 14px;
    }
    .yuan2 {
      background: #26272c;
    }
  }
}
.banner {
  display: block;
  width: 100%;
}
.main {
  position: relative;
  top: -5px;
  .tabs {
    border-radius: 8px 8px 0 0;
    font-size: 24px;
    div {
      padding: 16px 0;
      flex: 1;
      text-align: center;
      color: #ffffff;
    }
    div:nth-child(1) {
      border-radius: 8px 0 0 0;
    }
    div:last-child {
      border-radius: 0 8px 0 0;
    }
    .act {
      background: white;
      color: #000000;
    }
  }
  .items {
    padding: 8px;
    .item-i {
      background: white;
      margin-bottom: 4px;
      .item-name {
        background: #26272c;
        border: solid 1px white;
        font-size: 24px;
        font-weight: bold;
        color: white;
        padding: 7px 44px;
      }
      input {
        border: none;
        font-size: 20px;
        padding: 8px 10px;
        width: 280px;
      }
      img {
        width: 15px;
        margin-left: 7px;
        margin-right: 7px;
      }
      .options {
        position: absolute;
        background: white;
        width: 100%;
        text-align: center;
        font-size: 20px;
        box-shadow: 1px 1px 1px 2px gainsboro;
        z-index: 2;
        top: 46px;
        .options-item {
          border-bottom: solid 1px gainsboro;
          padding: 5px 0;
        }
      }
      .price {
        font-size: 20px;
        font-weight: bold;
        margin-left: 7px;
        span {
          color: #d62020;
          margin-left: 2px;
          font-size: 16px;
        }
      }
    }
    .deNumDiv {
      button {
        background: rgb(236, 236, 236);
        border: none;
        font-size: 25px;
        padding: 0 8px;
      }
      .deNum {
        // position: absolute;
        margin: 0 2px;
        right: 180px;
        width: 13px !important;
        background: rgb(236, 236, 236);
        font-size: 16px !important;
        text-align: center;
      }
    }
  }

  .items2 {
    img {
      width: 412px;
      display: block;
      margin: 10px auto;
    }
  }
  .bottom {
    padding: 0 8px 16px;

    .bto-left {
      background: white;
      width: 49%;
      padding: 11px 12px;
      border: solid 1px #000;
      .left-nav {
        border: solid 1px #000;
        font-size: 24px;
        padding: 6px;
        div {
          flex: 1;
          text-align: center;
          font-weight: bold;
          padding: 5px 0;
        }
        .btoAct {
          background: black;
          color: white;
        }
      }
      .bto-item {
        flex-wrap: wrap;
        .bto-item-i {
          border: solid 1px #000;
          padding: 6px 10px;
          width: 42%;
          margin-top: 6px;
          img {
            width: 48px;
            height: 70px;
            object-fit: cover;
          }
          .infos {
            margin-left: 10px;
            text-align: center;
            .name {
              font-size: 14px;
              font-weight: bold;
              color: #26272c;
            }
            .nums {
              font-size: 18px;
              font-weight: bold;
              color: #f63434;
              margin: 4px 0;
            }
            .tip {
              color: #ababab;
              font-size: 14px;
            }
          }
        }
        .bto-item-more {
          justify-content: center;
        }
      }
    }
    .bto-right {
      background: white;
      border: solid 1px #000;
      width: 100%;
      text-align: center;
      .sums {
        color: #d62020;
        font-size: 60px;
        font-weight: bold;
        margin-top: 20px;
        justify-content: center;
        text-align: center;
        position: relative;
        input {
          border: none;
          font-size: 60px;
          font-weight: bold;
          color: #d62020;
          width: 60%;
          text-align: center;
          position: absolute;
          height: 60px;
          left: 20%;
        }
      }
      .name {
        font-size: 48px;
        font-weight: bold;
      }
      .btns {
        width: 90%;
        margin: 20px auto;
        div {
          border-radius: 8px;
          background: #26272c;
          color: white;
          font-size: 24px;
          padding: 10px 88px;
        }
      }
    }
  }
}
.showTan {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.548);
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .tanCon {
    background: white;
    width: 60%;
    border-radius: 8px;
    padding: 29px 0;
    text-align: center;
    .title {
      font-size: 38px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    textarea {
      width: 80%;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 18px;
      height: 140px;
    }
    .btns {
      background: #26272c;
      border-radius: 8px;
      font-size: 24px;
      color: white;
      width: fit-content;
      margin: 50px auto 20px;
      padding: 5px 20px;
    }
  }
}
</style>
